<template>
    <div class="main_box" style="padding:10px">
        <div class="add_wrap">
            <el-form label-width="200px">
                <div class="tit">
                    <h2>基础信息</h2>
                    <el-button type="success" plain size="small" icon="fa fa-mail-forward" @click="returnList">返回
                    </el-button>
                </div>
                <el-row>
                    <el-form-item label="应用名称:">
                        <span>{{ dataInfo.appName }}</span>
                    </el-form-item>
                    <el-form-item label="Key:">
                        <span>{{ dataInfo.appKey }}</span>
                    </el-form-item>
                    <!-- <el-form-item label="logo:">
              <el-image :preview-src-list="[dataInfo.logo]" :src="dataInfo.logo"></el-image>
            </el-form-item> -->
                    <el-form-item label="最新版本号:">
                        <span>{{ dataInfo.version }}</span>
                    </el-form-item>
                    <el-form-item label="版本描述:">
                        <span>{{ dataInfo.describes }}</span>
                    </el-form-item>
                    <el-form-item label="应用类型:">
                        <span v-if="dataInfo.appType === 1">呼叫器</span>
                        <span v-if="dataInfo.appType === 2">其它</span>
                    </el-form-item>
                    <el-form-item label="创建人:">
                        <span>{{ dataInfo.createUserName }}</span>
                    </el-form-item>
                    <el-form-item label="创建时间:">
                        <span>{{ dataInfo.createDate }}</span>
                    </el-form-item>
                    <el-form-item label="修改人:">
                        <span>{{ dataInfo.modifyUserName }}</span>
                    </el-form-item>
                    <el-form-item label="修改时间:">
                        <span>{{ dataInfo.modifyDate }}</span>
                    </el-form-item>
                </el-row>
            </el-form>

            <div>
                <div class="tit">
                    <h2>版本上传历史记录</h2>
                </div>
                <div style="margin: 20px 0 ;width: 706px;">
                    <el-table height="600" :data="tableList" :fit="true" highlight-current-row v-loading="listLoading"
                        element-loading-text="数据加载中，请稍后..." empty-text="对不起，没有找到相关数据">
                        <el-table-column type="index" label="序号" align="center" width="100px">
                        </el-table-column>
                        <el-table-column prop="version" label="版本号" width="150px" align="center">
                        </el-table-column>
                        <el-table-column label="文件上传" width="150px" align="center">
                            <template slot-scope="scope">
                                <el-image v-if="scope.row.url" style="width: 120px; height: 120px"
                                    :src="scope.row.url || ''" fit="contain" :preview-src-list="[scope.row.url]">
                                </el-image>
                            </template>
                        </el-table-column>
                        <el-table-column prop="describes" label="描述" width="300px" align="center">
                        </el-table-column>
                    </el-table>
                    <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
                        :current-page="page.pageNo" :page-sizes="[20, 50, 100]" :page-size="page.pageSize"
                        layout="total, sizes, jumper, next, pager, prev" :total="page.pageTotal"></el-pagination>
                </div>
            </div>

        </div>
    </div>
</template>
  
<script>
import SoftwareApi from '@/api/organ/software';

export default {
    data() {
        return {
            dataInfo: {},
            page: {
                pageNo: 1,
                pageTotal: 0,
                pageSize: 20
            },
            tableList: [],
            listLoading: false,
        };
    },
    computed: {},
    mounted() {
        this.getData()
        this.getList()
    },
    methods: {
        getData() {
            SoftwareApi.detailSoftware({ appId: this.$route.query.id }).then(res => {
                if (res.status == 0) {
                    this.dataInfo = res.data
                }
            })
        },
        getList() {
            this.listLoading = false
            SoftwareApi.listVersion({
                appId: this.$route.query.id,
                pageNo: this.page.pageNo,
                pageSize: this.page.pageSize,
            }).then(res => {
                if (res.status == 0) {
                    this.tableList = res.data.list
                    this.page.pageTotal = res.data.total
                } else {
                    this.tableList = []
                    this.page.pageTotal = 0
                }
            })

        },
        returnList() {
            this.$store.dispatch('delView', this.$route);
            this.$router.go(-1)
        },
        handleSizeChange(size) {
            let _this = this;
            _this.page.pageSize = size;
            _this.getList();
        },
        handleCurrentChange(val) {
            let _this = this;
            _this.page.pageNo = val;
            _this.getList();
        },
    },

}

</script>
<style lang="scss" >
@import "@/assets/css/views/add.scss";
@import "@/assets/css/views/content.scss";
</style>
  